<template>
  <div>
    <div id="pie1"></div>
  </div>
</template>

    <script>
import echartMixins from "@/utils/resizeMixins";
export default {
  data() {
    return {
      chart: ""
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("pie1"));
      var dataname = [
        "互联网/计算机",
        "通信/电子",
        "房地产/建筑",
        "专业服务/教育",
        "制药/医疗",
        "能源",
        "政府",
        "其他1",
        "其他2",
        "其他3",
        "其他4"
      ];
      var datvalue = [1603, 1599, 1000, 950, 500, 260, 240, 130, 120, 110, 100];
      var color = ["#4B96F3", "#10C6A6", "#F2AF4B", "#FF4D4F", "#AA7AF1"];
      var colorList = [];
      for (var i = 0; i < dataname.length; i++) {
        if (i <= 4) {
          colorList[i] = color[i];
        } else {
          colorList[i] = color[i % 5];
        }
      }

      var data = [];
      for (var i = 0; i < dataname.length; i++) {
        data.push({
          value: datvalue[i],
          name: dataname[i],
          itemStyle: {
            color: colorList[i]
          }
        });
      }

      this.chart.setOption({
        tooltip: {
        trigger: 'item',
        formatter: "{b}: {c}"
    },
    series: [{
        type: 'treemap',
        width: '100%',
        height: '100%',
        breadcrumb: {
            show: false
        },
        label: {
            normal: {
                show: true,
                textStyle: {
                    color: '#fff',
                    fontSize: 16,
                },
            }
        },
        itemStyle: {
            normal: {
                show: true,
                borderWidth: 1,
                borderColor: '#fff',
            },
            emphasis: {
                label: {
                    show: true
                }
            }
        },
        data: data
    }]
      });
    }
  },
  beforeDestroy() {
    //   console.log(this.chart);
    this.chart.dispose();
    this.chart = "";
    // console.log('------------------销毁阶段------------------')
    // console.log(this.chart);
    // 仍可以使用data与method方法
    //   console.log(`这是beforeDestroy的执行:${this.name}`)
  }
};
</script>

    <style lang="scss" scoped>
#pie1 {
  width: 100%;
  height: 40vh;
}
</style>